<template>
    <el-dialog v-model="ColorSwitch" title="主题颜色" width="70%">
        <div class="colors">
            <div class="left">
                <el-row :gutter="20">
                    <el-col class="el-col" :span="12" v-for="(item, index) in colorList" :key="index">
                        <el-card  style="max-width: 300px">
                            <div class="properties" @click="selected(index)">
                                <div class="color" :style="{ backgroundColor: item.hex }"></div>
                                <div class="color-desc">
                                    <span :style="{ color: item.hex }">{{ item.name }}</span>
                                    <span :style="{ color: item.hex }">{{ item.pinyin }}</span>
                                    <br /><br />
                                    <span style="font-size: 12px;"> {{ item.hex }} | {{ `rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})` }}</span>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <div style="width: 20%;" class="desc">
                <div class="name item" :style="{ color: item.hex }">{{ item.name }}</div>
                <div class="item">{{ item.pinyin || '' }}</div>
                <div class="item-color item" :style="{ backgroundColor: item.hex }"></div>
                <img src="/theme-color.png" class="img" />
                <p>中国色列表来自于： http://zhongguose.com</p>
            </div>
        </div>
    </el-dialog>
</template>
<script setup>

import { ref } from 'vue'
import colorList from '@/data/Color.json'
import themeStore from '@/stores/themeStore.js'
const _themeStore = themeStore()
const ColorSwitch = ref(false)
const showColor = () => {
    ColorSwitch.value = true
}
const emits = defineEmits({})
emits("seleted")

const item = ref({ name: "中国色" })
const selected = (index) => {
    item.value = colorList[index]
    _themeStore.setAppColor(item.value)
}

// 暴露方法
defineExpose({
    showColor
})

</script>

<style scoped lang="scss">
.el-col {
    margin-bottom: 20px;
    cursor: pointer;

}

.colors :deep .el-card__body {
    border: 1px solid transparent;

    &:hover {
        border: 1px solid #373739;
    }
}

.colors {
    display: flex;
    justify-content: space-around;

    .left {
        width: 60%;
        max-height: 500px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .properties {
        display: flex;

        .color {
            width: 10px;
            height: 60px;
            border-radius: 2px;
        }

        .color-desc {
            margin-left: 10px;
        }
    }

    .item-color {
        height: 20px;
        width: 100px;
        border-radius: 4px;
    }

    .desc {
        position: relative;

        .name {
            font-size: 70px;
            width: 70px;
            color: #fff;
        }

        .item {
            margin: 5px 0;
        }

        .img {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}
</style>